<!--
  404错误页面
  创建时间：2025-09-11
  作者：开发团队
  目的：处理页面不存在的情况
-->

<template>
  <div class="not-found">
    <el-result
      icon="error"
      title="404"
      sub-title="抱歉，您访问的页面不存在"
    >
      <template #extra>
        <el-button type="primary" @click="goBack">
          返回上页
        </el-button>
        <el-button @click="goHome">
          回到首页
        </el-button>
      </template>
    </el-result>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

// 路由和状态
const router = useRouter()
const authStore = useAuthStore()

/**
 * 返回上一页
 */
const goBack = (): void => {
  router.back()
}

/**
 * 回到首页
 */
const goHome = (): void => {
  if (authStore.isAuthenticated) {
    const userRole = authStore.userRole
    switch (userRole) {
      case 'guard':
        router.push('/guard')
        break
      case 'admin':
        router.push('/admin')
        break
      case 'superadmin':
        router.push('/superadmin')
        break
      default:
        router.push('/login')
    }
  } else {
    router.push('/login')
  }
}
</script>

<style scoped>
.not-found {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--el-bg-color-page);
}
</style>"